<template>
  <view class="w">
    <view class="ti">
      设置完成后，家庭成员将与您享有同等服务。
    </view>
    <Card class="card" title="所属小区">
      <template v-slot:fu-title>
        <text>瑞辰国际</text>
      </template>
      <template v-slot:fu-icon>
        <image
          src="/static/icons/右箭头.png"
          mode="scaleToFill"
        />
      </template>
    </Card>
    <Card class="card" title="张三">
      <template v-slot:main-title>
        <image
        class="tou"
          src="/static/icons/我的.png"
          mode="scaleToFill"
        />
      </template>
      <template v-slot:main>
				<view class="content">
					<view class="content-item">
						<view class="item-left">
							联系电话
						</view>
						<view class="item-right">
							13536235364
						</view>
					</view>
					<view class="content-item">
						<view class="item-left">
							成员类型
						</view>
						<view class="item-right">
							亲属
						</view>
					</view>
				</view>
			</template>
    </Card>
    <Card class="card" title="张三">
      <template v-slot:main-title>
        <image
        class="tou"
          src="/static/icons/我的.png"
          mode="scaleToFill"
        />
      </template>
      <template v-slot:main>
				<view class="content">
					<view class="content-item">
						<view class="item-left">
							联系电话
						</view>
						<view class="item-right">
							13333333334
						</view>
					</view>
					<view class="content-item">
						<view class="item-left">
							成员类型
						</view>
						<view class="item-right">
							租户
						</view>
					</view>
				</view>
			</template>
    </Card>
  </view>

  <view class="add">
			+
		</view>
</template>

<script setup>
import Card from '/components/card-2.0.vue'
import {ref} from 'vue'

</script>

<style lang="scss" scoped>
.w{
  background-color: rgb(245, 245, 245);
  height: calc(100vh - 91rpx);
  overflow: auto;

  .ti{
    margin: 20rpx;
    font-size: 26rpx;
    padding: 20rpx;
    color: rgb(123,123,123);
  }
}
.card{
  image{
    width: 35rpx;
    height: 35rpx;
    vertical-align: middle;
  }
  .tou{
    margin-right: 20rpx;
    width: 30rpx;
    height: 30rpx;
    vertical-align: middle;
  }
  .content{
		.content-item{
			display: flex;
			justify-content: space-between;
			align-items: center;
      margin-bottom: 20rpx;
			.item-right{
				color: #000;
			}
		}
	}
}
.add{
		height: 100rpx;
		width: 100rpx;
		border-radius: 50%;
		color:rgb(53, 164, 243);
		box-shadow: 0 0 2rpx 5rpx rgb(149, 209, 251);
		text-align: center;
		line-height: 100rpx;
		font-size: 60rpx;
		position: fixed;
		left: 50%;
		bottom: 50rpx;
		margin-left: -50rpx;
	}
</style>